<template>
  <div class="header-container">
    <!-- 左侧：Logo、标题和主页链接 -->
    <div class="header-left">
      <img src="@/assets/images/logo.jpg" alt="全都有超市" class="logo-img">
      <span class="app-title">全都有超市</span>
      <el-button 
        type="primary" 
        link 
        class="home-button"
        @click="goToHome"
      >
        回到主页
      </el-button>
    </div>

    <!-- 右侧：用户信息 -->
    <div class="header-right">
      <el-dropdown @command="handleCommand">
        <span class="user-info">
          <img src="@/assets/images/user-avatar.jpg" alt="User Avatar" class="user-avatar">
          {{ displayUsername }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人资料</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentUser: {
        name: '管理员' // 示例数据
      },
      userPosition: null // 存储从后端获取的职位信息
    }
  },
  computed: {
    displayUsername() {
      const username = this.$store.getters.getUserInfo?.username || '未知用户'
      const positionName = this.$store.getters.getUserInfo?.position || '未知职位'
      return `${username}（${positionName}）`
    }
  },
  async mounted() {
    await this.fetchUserPosition()
  },
  methods: {
    async fetchUserPosition() {
      const userInfo = this.$store.getters.getUserInfo
      if (!userInfo || !userInfo.username) {
        console.warn('未找到登录用户名')
        return
      }

    },
    handleCommand(command) {
      if (command === 'profile') {
        this.$router.push('/settings/profile')
      } else if (command === 'logout') {
        this.$store.dispatch('saveUserInfo', {
          username: null,
          password: null,
          position: null
        })
        this.$router.push('/login')
      }
    },
    goToHome() {
      // 如果当前已经是管理后台，则跳转到管理后台的仪表盘
      if (this.$route.path.startsWith('/admin')) {
        this.$router.push('/admin/dashboard')
      } else {
        // 否则跳转到普通用户主页
        this.$router.push('/home')
      }
    }
  }
}
</script>

<style scoped lang="less">
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  .header-left {
    display: flex;
    align-items: center;

    .logo-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }

    .app-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-right: 20px;
    }

    .home-button {
      font-size: 14px;
      color: #409eff;
    }
  }

  .header-right {
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;

      .user-avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 8px;
      }
    }
  }
}
</style>